<template>
    <div>
    <!-- 提示框 -->
    <el-dialog title="提示" :visible.sync="openOff" center :append-to-body='true' :lock-scroll="false" width="30%">
    <Prompt></Prompt>
    </el-dialog>

    <!-- 新增详情对话框 -->
    <el-dialog :visible.sync="detailVisible" title="书籍详情" width="60%">
      <div v-if="selectedBook" class="book-detail">
        <img :src="selectedBook.bookimg" style="width: 300px;float:left;margin-right:20px">
        <div>
          <h2>{{ selectedBook.bookname }}</h2>
          <p class="price">售价：￥{{ selectedBook.price }}</p>
          <el-input-number 
            v-model="selectedBook.quantity"
            :min="1"
            :max="10"
            size="small"
            style="margin: 10px 0"></el-input-number>
          <el-button type="primary" @click="addToCart">加入购物车</el-button>
          <div class="info-section">
            <h3>书籍简介</h3>
            <p>{{ selectedBook.info }}</p>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 原有表格保持不变 -->
    <el-table :data="pagedTableData" style="width: 100%">
      <el-table-column
      label="id"
      width="150">
      <template slot-scope="scope">
        <i class="is-text"></i>
        <span style="margin-left: 50px">{{ scope.row.id }}</span>
      </template>
      </el-table-column>

      <el-table-column
      prop="picture"
      label="书籍封面"
      width="300">
        <template width="90" slot-scope="scope">
           <img style="width:250px;height:250px;border:none;" :src="scope.row.bookimg">
        </template>
      </el-table-column>

      <el-table-column
        label="书籍名称"
        width="180">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>书籍名称: {{ scope.row.bookname }}</p>
            <p>书籍信息: {{ scope.row.info }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.bookname }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column
      label="剩余数量"
      width="180">
      <template slot-scope="scope">
        <i class="is-text"></i>
        <span style="margin-left: 50px">{{ scope.row.remainingamount }}</span>
      </template>
      </el-table-column>

      <el-table-column
        label="开始时间"
        width="200">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.begindate }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="结束时间"
        width="200">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.enddate }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="success"
            @click="handleEdit(scope.$index, scope.row)">查看详情</el-button>
        </template>
      </el-table-column>

    </el-table>
    <!-- 添加清空购物车按钮 -->
  
  </div>
</template>



  <script>
    import Prompt from '@/components/Prompt.vue'

    export default {
      components: { Prompt },
      data() {
        return {
          detailVisible: false,
          selectedBook: null,
          currentPage: 1,      // 分页参数移动到主data中
          pageSize: 5,         // 分页参数移动到主data中
          tableData: [
            {
              id: 1,
              bookimg: require('@/assets/img/jvm.jpg'),
              bookname: '深入理解Java虚拟机:JVM高级特性与最佳实践(第2版)',
              info: '本书共分为五大部分...',
              price: 89.99,  // 新增价格字段
              remainingamount: '20',
              begindate: '2025-05-02',
              enddate: '2025-06-03',
              quantity: 1
            },
            {
              id: 2,
              bookimg: require('@/assets/img/distributed.jpg'),
              bookname: 'Paxos到Zookeeper：分布式一致性原理与实践',
              info: '本书从分布式一致性...',
              remainingamount: '15',
              begindate: '2025-05-03',
              enddate: '2025-06-04'
            },
            {
              id: 3,
              bookimg: require('@/assets/img/mysql.jpg'),
              bookname: 'MySQL技术内幕:InnoDB存储引擎(第2版)',
              info: '本书从源代码的角度...',
              remainingamount: '10',
              begindate: '2025-05-04',
              enddate: '2025-06-05'
            }
          ]
        }
      },
      computed: {
        pagedTableData() {
          return this.tableData.slice(
            (this.currentPage - 1) * this.pageSize,
            this.currentPage * this.pageSize
          )
        }
      },
      methods: {
        handleEdit(index, row) {
          this.selectedBook = { ...row }
          this.detailVisible = true
        },
        addToCart() {
          const cartItems = JSON.parse(localStorage.getItem('cart') || '[]')
          const existingItem = cartItems.find(item => item.id === this.selectedBook.id)
          
          if (existingItem) {
            existingItem.quantity += this.selectedBook.quantity
          } else {
            cartItems.push({
              ...this.selectedBook,
              bookimg: this.selectedBook.bookimg, // 确保封面字段存在
              price: this.selectedBook.price,     // 确保价格字段存在
              code: Date.now().toString(),
              createtime: new Date().toLocaleString(),
              difftime: 0,
              username: '当前用户'
            })
          }
          
          localStorage.setItem('cart', JSON.stringify(cartItems))
          this.$message.success('已加入购物车')
          this.detailVisible = false
        },
        clearCart() {
          this.$confirm('确认清空购物车吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            localStorage.removeItem('cart');
            this.$message.success('购物车已清空');
          }).catch(() => {});
        }
      }
    }
</script>


<style scoped>
.book-detail {
  padding: 20px;
  overflow: hidden;
}
.price {
  color: #f56c6c;
  font-size: 24px;
  margin: 15px 0;
}
.info-section {
  margin-top: 20px;
  border-top: 1px solid #eee;
  padding-top: 15px;
}
</style>

<el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="currentPage"
  :page-sizes="[5, 10, 20]"
  :page-size="pageSize"
  layout="total, sizes, prev, pager, next, jumper"
  :total="tableData.length">
</el-pagination>
</script>
